<script setup lang="ts">
	import { onMounted, ref } from 'vue'
	import dialogCloseBtn from '@/static/coupon-dialog-close.png';
	import { postagepay } from "@/api/pay"
	const emit = defineEmits(['close', 'confirm',"orderstate","getono"])
	function onClose() {
		emit('close')
		// setTimeout(() => {
		// 	openstatus.value = !openstatus.value
		// },300)
	}
	let openstatus = ref(false)
	let payUrl = ref("")
	onMounted(async() =>{
		const res = await postagepay({  platform: "支付宝" })
    const data = res.data || {}
    // console.log('-----data', data)
    // console.log('-----res', res)
		payUrl.value = data.ali_pay.url;
		emit('getono',data.order_num)
	})
	async function onConfirm(num) {
		if (num == 2) {
			openstatus.value = !openstatus.value
		} else {
			emit('confirm', num)
		}
	}
	function copyUrl() {
		uni.setClipboardData({
			data: payUrl.value,
			success: function () {
				uni.showToast({
					title: "复制成功",
					icon: "none"
				})
				emit('orderstate')
			}
		});
	}
</script>

<template>
	<view class="coupon-dialog-content">
		<image class="close-btn" src="/static/pay-close.png" mode="aspectFit" v-on:click="onClose" />
		<!-- <image class="close-btn" :src="dialogCloseBtn" mode="aspectFit" v-on:click="onClose" /> -->
		<!-- <view class="btnbg" v-if="openstatus">
			<view class="pay-btn" @click="onConfirm(1)">
				后台充值（93折），联系客服
			</view>
			<view class="pay-btn" @click="onConfirm(2)">
				支付宝充值（95折）
			</view>
			<view class="pay-btn" @click="onConfirm(3)">
				微信充值（原价）
			</view>
		</view> -->
		<view  class="alipay">
			<!-- <text class="payurl">{{payUrl}}</text> -->
			<view class="payurl">
				复制url到浏览器打开，即可充值
			</view>
			<view class="pay-btn1" @click="copyUrl">
				复制链接
			</view>
		</view>
	</view>
</template>

<style>
	.alipay {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 20rpx;
		justify-content: space-between;
	}

	.pay-btn1 {
		width: 100%;
		text-align: center;
		height: 80rpx;
		background: linear-gradient(90deg, #FEF4CC 0%, #F5D069 100%);
		line-height: 80rpx;
		border-radius: 40rpx;
		margin-top: 50rpx;
	}

	.title {
		margin-top: 50rpx;
		color: #ffffff;
	}

	.coupon-dialog-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #18181C;
		/* background: linear-gradient(180deg, #303030 0%, #0F0F0F 100%); */
		padding: 30rpx 20rpx;
		position: relative;
	}

	page {
		--dialog-background-color: transparent;
	}

	.close-btn {
		position: absolute;
		top: 15px;
		right: 10px;
		width: 20px;
		height: 20px;
	}

	.btnbg {
		width: 90%;
		margin: 20rpx auto;
	}

	.pay-btn {
		margin: 40rpx 15rpx 0;
		text-align: center;
		height: 80rpx;
		background: linear-gradient(90deg, #E174ED 0%, #2F76EC 100%);
		line-height: 80rpx;
		border-radius: 40rpx;
	}

  .payurl {
    padding-top: 30rpx;
    width: 100%;
    word-wrap: normal;
    overflow: hidden;
	color: #ffffff;
	text-align: center;
  }
</style>